<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="select container">
  <div class="select-content">
    <a class="select-title">请选择</a>
  </div>
</div>
<script>
  var arr = [
    {name:"安徽",childName: [{
                name:"宿州",childName:[{name:"墉桥"},{name:"泗县"},{name:"灵璧"},{name:"萧县"},{name:"砀山"},{name:"其他"}]
            }, {
      name: "安庆",
      childName: [{name:"大观"}, {name:"迎江"}, {name:"宜秀"}, {name:"桐城"}, {name:"枞阳"}, {name:"怀宁"}, {name:"潜山"}, {name:"宿松"}, {name:"岳西"}, {name:"其他"}]
    }]
  },
  {name:"浙江",childName:
          [{
              name:"杭州",childName:[{name:"西湖"},{name:"拱墅"},{name:"江干"},{name:"下城"},{name:"上城"},{name:"余杭"},{name:"萧山"},{name:"滨江"},{name:"建德"},{name:"富阳"},{name:"临安"},{name:"桐庐"},{name:"淳安"},{name:"杭州周边"}]
          },
  {
    name: "宁波", childName
  :
    [{name: "海曙"}, {name: "江东"}, {name: "江北"}, {name: "鄞州"}, {name: "北仑"}, {name: "镇海"}, {name: "高新区"}, {name: "余姚"}, {name: "慈溪"}, {name: "象山"}, {name: "奉化"}, {name: "桐庐"}, {name: "宁海"}, {name: "宁波周边"}]
  }
  ]
  }]
  ;

  var expand = $("<ul>").appendTo(document.body).addClass("expand").addClass("list-inline").hide();
  $(".select").on("click", ".select-content", function(){
    $.each(
      arr,function(idx,v){
        $("<li>").append(
          $("<a>").html(v.name))
          .attr("data-idx",idx)
          .appendTo(expand);
      });
    expand.show().appendTo($(this));
  });

  //下拉弹出层点击事件 1.点击弹出层列表项给一级按钮，然后判断该项有没有下一级，有的话，展示下拉弹出层内容。
  expand.on("click", "li", function (e) {
    var _self = $(this);
    var parentBtn =_self.parents(".select-content");
    // 当前的选中索引保存给按钮
    parentBtn.attr("data-selected", _self.attr("data-idx"));
    parentBtn.children(".select-title").html(_self.text());

    // 生成列表开始
    var arr1 = arr; // arr1 是最终展示的列表内容
      $(".select-content").each(function () {
        // 不断更新arr1,使其包含当前选中的索引对应的数组
        arr1 = arr1[$(this).attr("data-selected")].childName;
      });
      //生成下一个兄弟按钮
      var nextBtn = $("<div class='select-content'>").append(
        $("<a class='select-title'>").html("请选择")
      ).appendTo(parentBtn.parent());

      // 用arr1生成列表
      expand.empty();
      $.each(arr1, function(idx, v){
        $("<li>").append($("<a>").html(v.name))
          .attr("data-idx", idx)
          .appendTo(expand);
      });
      // 生成列表结束
      nextBtn.append(expand);
  });

</script>
</body>
</html>